import {DeleteOutlined, EditOutlined} from '@ant-design/icons';
import {IconPlus} from '@douyinfe/semi-icons';
import {Conversations} from '@ant-design/x';
import type {ConversationsProps} from '@ant-design/x';
import {type GetProp} from 'antd';
import React, {useEffect, useState} from "react";
import {Button} from "@douyinfe/semi-ui";
import {
    addNewConversation,
    deleteConversation,
    getConversationList, getDefaultNewConversationName, getNowConversationKey, setConversationNewName,
    setNowConversationKey
} from "../../../api/storage/ApiConversation.ts";
import SetConversation from "./conversation/SetConversation.tsx";

//刷新全部对话项目
const getConversations = () => {
    return getConversationList().map(value => {
        return {
            key: value.key,
            label: value.name,
            disabled: false
        };
    });
}


const AIConversationPanel = (props: {
    style?: React.CSSProperties,
    height: number,
    changeCall: () => void
}) => {
    //设置当前启用的key
    const [activeKey, setActiveKey] = useState<string>(getNowConversationKey());
    //获取已有的items
    const [items, setItems] = useState<GetProp<ConversationsProps, 'items'>>(getConversations());
    //是否显示对话框
    const [showDialog, setShowDialog] = useState(false);
    //显示新建对话
    const newConversation = () => {
        onConversationChange(addNewConversation(getDefaultNewConversationName(),true))
        refreshList()
    }

    //设置启用的key对话
    const onConversationChange = (key: string) => {
        //设置启用key，使得这个页面的选中正常显示
        setActiveKey(key)
        //设置当前会话key
        setNowConversationKey(key)
        props.changeCall()
    }
    //是否显示对话框
    const [clickItemKey, setClickItemKey] = useState("");
    //刷新会话列表
    const refreshList = () => {
        //刷新会话Items
        setItems(getConversations())
    }
    const setConversationName = (name: string) => {
        setConversationNewName(clickItemKey, name)
        refreshList()
    }
    //右侧菜单单击
    const menuConfig: ConversationsProps['menu'] = (conversation) => ({
        items: [
            {
                label: '重命名',
                key: 'rename',
                icon: <EditOutlined/>,
                danger: false,
            },
            {
                label: '删除对话',
                key: 'delete',
                icon: <DeleteOutlined/>,
                danger: true,
            },
        ],
        //显示没有用到，实际上用到的，不用管
        onClick: (menuInfo) => {
            if (menuInfo.key === "delete") {
                // 删除会话
                deleteConversation(conversation.key);
                // 刷新项目
                setItems(getConversations());
                if (conversation.key === getNowConversationKey()) {
                    props.changeCall();
                }
            } else if (menuInfo.key === "rename") {
                setClickItemKey(conversation.key)
                setShowDialog(true);
            }
        },
    });
    const [conversationsHeight, setConversationsHeight] = useState(0);
    useEffect(() => {
        //动态计算高度
        const calculateHeight = () => {
            const newHeight = props.height - 40 - 15 * 2 - 24;
            setConversationsHeight(newHeight);
        };
        calculateHeight();
    }, [props.height]);
    return (
        <div style={props.style}{...{
            height: props.height,
        }}>
            <div style={{
                padding: 15,
            }}>
                <Button icon={<IconPlus/>}
                        onClick={newConversation}
                        style={{
                            width: "100%",
                            borderRadius: 8,
                            height: 40,
                            borderStyle: "solid",
                            borderWidth: 1,
                            borderColor: "var(--semi-color-primary)",
                        }}>新建对话</Button>
            </div>
            <SetConversation visible={showDialog} setVisible={setShowDialog} refreshList={refreshList}
                             setConversationName={setConversationName}/>
            <Conversations activeKey={activeKey} menu={menuConfig} items={items}
                           onActiveChange={(k) => onConversationChange(k)}
                           style={{height: `${conversationsHeight}px`, scrollbarWidth: "none"}}/>
        </div>
    )
}
export default AIConversationPanel